<template>
  <div>
    <div>剩余: {{ rest }}</div>
    <button @click="onStatusChange('全部')">全部</button>
    <button @click="onStatusChange('未完成')">未完成</button>
    <button @click="onStatusChange('已完成')">已完成</button>
    <button @click="onStatusChange('清除已完成')">清除已完成</button>
  </div>
</template>

<script>
import evtBus from '../event-bus/todolist';

export default {
  computed: {
    rest () {
      return evtBus.list.filter(item => !item.isDone).length;
    },
  },
  methods: {
    onStatusChange (status) {
      evtBus.$emit('修改状态', status);
    },
    // // 全部
    // onAll () {
    //   evtBus.$emit('修改状态', '全部');
    // },
    // // 未完成
    // onUndo () {
    //   evtBus.$emit('修改状态', '未完成');
    // },
    // // 已完成
    // onDone () {
    //   evtBus.$emit('修改状态', '已完成');
    // },
    // // 清除已完成
    // onClear () {
    //   evtBus.$emit('修改状态', '清除已完成');
    // },
  },
}
</script>

<style scoped>

</style>